<template>
  <div class="home-page">
    <div class="banner">
      <div class="container">
        <h1 class="logo-font">conduit</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>

    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <div class="feed-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" v-if="user">
                <nuxt-link
                  exact
                  class="nav-link"
                  :class="{
                    active: tab === 'your_feed'
                  }"
                  :to="{
                  name: 'home',
                  query: {
                    tab: 'your_feed'
                  }
                }"
                >Your Feed</nuxt-link>
              </li>
              <li class="nav-item">
                <nuxt-link
                  exact
                  class="nav-link"
                  :class="{
                    active: tab === 'global_feed'
                  }"
                  :to="{
                  name: 'home',
                  query: {}
                }"
                >Global Feed</nuxt-link>
              </li>
              <li class="nav-item" v-if="tag">
                <nuxt-link
                  exact
                  class="nav-link active"
                  :to="{
                  name: 'home',
                  query: {
                    tag: tag
                  }
                }"
                ># {{tag}}</nuxt-link>
              </li>
            </ul>
          </div>
          <div class="article-preview" v-if="!articles.length">No articles are here... yet.</div>
          <template v-else>
            <div class="article-preview" v-for="article in articles" :key="article.slug">
              <!--文章-->
              <article-item :article="article" />
            </div>
          </template>
        </div>

        <div class="col-md-3">
          <div class="sidebar">
            <p>Popular Tags</p>
            <div class="tag-list">
              <nuxt-link
                v-for="t in top20Tags"
                :to="{
                name: 'home',
                query: {
                  tag: t
                }
              }"
                :key="t"
                class="tag-pill tag-default"
                :class="{
                 active: t === tag
               }"
              >{{t}}</nuxt-link>
            </div>
          </div>
        </div>

        <nav>
          <ul class="pagination" v-for="p in pages" :key="p">
            <li
              class="page-item ng-scope"
              :class="{
              active: p === page
            }"
            >
              <nuxt-link
                class="page-link"
                :to="{
                name: 'home',
                query: {
                  page: p,
                  tab: tab,
                  tag: tag
                }
              }"
              >{{p}}</nuxt-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getAllArticles, getFeedArticles } from '@/api/article.js'
import { getAllTags } from '@/api/tag.js'
import ArticleItem from '@/pages/components/article.vue'
export default {
  name: 'Home',
  components: { ArticleItem },
  watchQuery: ['page', 'tag', 'tab'],

  async asyncData({ query }) {
    let { page = '1', limit = 10, tag, tab } = query
    if (!tab) {
      tab = tag || 'global_feed'
    }
    page = Number.parseInt(page)

    const feedRequest = tab === 'your_feed' ? getFeedArticles : getAllArticles

    const [articlesRes, tagRes] = await Promise.all([
      feedRequest({
        limit,
        offset: (page - 1) * limit,
        tag,
      }),
      getAllTags(),
    ])

    const {
      data = {
        articles: [],
        articlesCount: 0,
      },
    } = articlesRes

    const { tags = [] } = tagRes.data || { tags: [] }

    return {
      articles: data.articles,
      count: data.articlesCount,
      limit,
      page,
      tags,
      tag,
      tab,
    }
  },
  computed: {
    ...mapState(['user']),
    pages() {
      return Math.ceil(this.count / this.limit)
    },
    top20Tags() {
      return this.tags.filter((tag, index) => index < 20)
    },
  },
}
</script>